<div class="register_backgroud">
    <div class="register_step">
        <div class="flex align_center">
            <div class="circle w20 h20 step_circle step_circle_active" (click)="add()">1</div>
            用户登录
            <div class="step_line"></div>
        </div>
        <div class="flex align_center">
            <div class="circle w20 h20 step_circle ">2</div>
            虚拟机安装
            <div class="step_line"></div>
        </div>
        <div class="flex align_center">
            <div class="circle w20 h20 step_circle ">3</div>
            连接互联网
            <div class="step_line"></div>
        </div>
        <div class="flex align_center">
            <div class="circle w20 h20 step_circle ">4</div>
            激活License
            <div class="step_line"></div>
        </div>
        <div class="flex align_center">
            <div class="circle w20 h20 step_circle ">5</div>
            连接工作网络
        </div>
    </div>
    <div class="register_box flex justify_center">
        <!--登录界面-->
        <div class="login" *ngIf="step == 1">
            <div class="login_title">欢迎使用 AutoMate AI 一体机</div>
            <div class="login_prompt">{{true?'':'首次登录可查阅您的购买记录获取用户名及密码信息'}}</div>
            <img class="login_img" src="assets/images/login.png">
            <div class="flex flex_column login_form" *ngIf="ShowLogin === false">
                <div class="flex justify_space align_center">用户名
                    <input placeholder="请输入用户名" class="logininput" [(ngModel)]="userName">
                </div>
                <div class="flex justify_space mgt20 align_center">密码
                    <input type="password" placeholder="请输入密码" class="logininput" [(ngModel)]="userPassword">
                </div>
              <div class="flex justify_space mgt20 align_center">验证码
                <input  placeholder="验证码" class="logininput" [(ngModel)]="code">
              </div>

              <div class="flex justify_space mgt20 align_center">验证码
                <img  src="{{VerifyCodeImage}}">
                <div class="login_btn flex align_center justify_center" (click)="getVerify()">
                  刷新验证码
                </div>
              </div>

                <div class="login_btn flex align_center justify_center" (click)="LonginBtn()">
                    现在登录
                </div>
            </div>
            <div class="login_loading_form  flex align_center justify_center" *ngIf="ShowLogin === true">
                <div class="loading"></div>
                <div>正在登录</div>
            </div>
            <!-- 错误提示信息 -->
            <div class="login_waring flex align_center" *ngIf="waringShow === true">
                <img style="width: 16px;height: 15px;" src="assets/images/icon-waring.png">
                <div class="flex_1 mglr8">{{waringMessage}}</div>
                <img style="width: 10px;height: 10px;" src="assets/images/icon-del.png" (click)="shutWaring()">
            </div>
        </div>
        <!-- 虚拟机安装 -->
        <div *ngIf="step == 2" class="login">
            <div class="login_title">虚拟机安装</div>
            <div class="install_box">
                <div class="box_header flex align_center">
                    <div style="flex:5">虚拟机名称</div>
                    <div style="flex:5">状态</div>
                    <div style="flex:7">创建时间</div>
                   <!-- <div style="flex:7">结束时间</div>-->
                  <div style="flex:7">CPU架构</div>
                  <div style="flex:7">IP地址</div>
                  <div style="flex:7">所属集群</div>
                  <div style="flex:7">所属主机</div>
                    <div style="flex:7">描述</div>
                    <div style="flex:3">操作</div>
                </div>
                <div *ngFor="let item of virtualList" class="box_body flex align_center ">
                    <div style="flex:5">{{item.virtualTitle}}</div>
                    <div style="flex:5" [ngSwitch]="item.virtualStaus">
                        <div *ngSwitchCase="'running'" class="flex align_center">
                            <div style="width:10px;height:10px;border-radius: 50%;background: #50D4AB;margin-right: 8px;"></div>运行中
                        </div>
                        <div *ngSwitchCase="'stopped'" class="flex align_center">
                            <div style="width:10px;height:10px;border-radius: 50%;background: #FAC20A;margin-right: 8px;"></div>停止
                        </div>

                    </div>
                    <div style="flex:7">{{item.startTime}}</div>

                    <div style="flex:7">{{item.arch}}</div>
                    <div style="flex:7">{{item.ip}}</div>
                    <div style="flex:7">{{item.clusterName}}</div>
                    <div style="flex:7">{{item.hostName}}</div>




                    <div style="flex:7">{{item.remark}}</div>
                    <div style="flex:3">{{item.virtualStaus==3?"删除":''}}</div>
                </div>
                <div class="add_virtual flex align_center" (click)="showModal()">
                    <img style="width: 16px;height: 16px;margin-right: 4px;" src="assets/images/add-get.png" > 添加一台虚拟机
                </div>


                <div>
                  <nz-modal [(nzVisible)]="isVisible" nzTitle="创建虚拟机" nzWidth="50%" (nzOnCancel)="handleCancel()"
                          >
                    <ng-container *nzModalContent>


                      <div nz-row>
                        <div *ngIf="virtualType == 1" nz-col nzSpan="6">
                          <nz-steps [nzCurrent]="virtualStep-1" nzDirection="vertical" nzSize="small">
                            <nz-step nzTitle="选择创建类型" nzDescription=""></nz-step>
                            <nz-step nzTitle="基本配置" nzDescription=""></nz-step>
                            <nz-step nzTitle="选择数据存储" nzDescription=""></nz-step>
                            <nz-step nzTitle="虚拟机配置" nzDescription=""></nz-step>
                            <nz-step nzTitle="确认信息" nzDescription=""></nz-step>
                          </nz-steps>
                        </div>
                        <div *ngIf="virtualType == 2" nz-col nzSpan="6">
                          <nz-steps [nzCurrent]="virtualStep-1" nzDirection="vertical" nzSize="small">
                            <nz-step nzTitle="选择创建类型" nzDescription=""></nz-step>
                            <nz-step nzTitle="基本配置" nzDescription=""></nz-step>
                            <nz-step nzTitle="虚拟机配置" nzDescription=""></nz-step>
                            <nz-step nzTitle="自定义客户机操作系统" nzDescription=""></nz-step>
                            <nz-step nzTitle="确认信息" nzDescription=""></nz-step>
                          </nz-steps>
                        </div>
                        <div *ngIf="virtualType == 3" nz-col nzSpan="6">
                          <nz-steps [nzCurrent]="virtualStep-1" nzDirection="vertical" nzSize="small">
                            <nz-step nzTitle="选择创建类型" nzDescription=""></nz-step>
                            <nz-step nzTitle="基本配置" nzDescription=""></nz-step>
                            <nz-step nzTitle="虚拟机配置" nzDescription=""></nz-step>
                            <nz-step nzTitle="确认信息" nzDescription=""></nz-step>
                          </nz-steps>
                        </div>
                        <div *ngIf="virtualType == 4" nz-col nzSpan="6">
                          <nz-steps [nzCurrent]="virtualStep-1" nzDirection="vertical" nzSize="small">
                            <nz-step nzTitle="选择创建类型" nzDescription=""></nz-step>
                            <nz-step nzTitle="模板导入" nzDescription=""></nz-step>
                            <nz-step nzTitle="基本配置" nzDescription=""></nz-step>
                            <nz-step nzTitle="选择数据存储" nzDescription=""></nz-step>
                            <nz-step nzTitle="虚拟机配置" nzDescription=""></nz-step>
                            <nz-step nzTitle="自定义客户操作系统" nzDescription=""></nz-step>
                            <nz-step nzTitle="确认信息" nzDescription=""></nz-step>
                          </nz-steps>
                        </div>
                        <div *ngIf="virtualType == 5" nz-col nzSpan="6">
                          <nz-steps [nzCurrent]="virtualStep-1" nzDirection="vertical" nzSize="small">
                            <nz-step nzTitle="选择创建类型" nzDescription=""></nz-step>
                            <nz-step nzTitle="选择模板" nzDescription=""></nz-step>
                          </nz-steps>
                        </div>

                        <div div *ngIf="virtualStep == 1" nz-col nzSpan="18">
                          <div nz-row>
                            <div nz-col nzSpan="8">
                              <h3 (click)="setVirtualType(1)">创建新虚拟机</h3>
                              <h3 (click)="setVirtualType(2)">使用模板部署虚拟机</h3>
                              <h3 (click)="setVirtualType(3)">虚拟机克隆为虚拟机</h3>
                              <h3 (click)="setVirtualType(4)"> 导入虚拟机</h3>
                              <h3 (click)="setVirtualType(5)"> 模板转为虚拟机</h3>
                            </div>
                            <div nz-col nzSpan="16">
                              <div *ngIf="virtualType == 1">
                                此选项将指导您完成创建新虚拟机的过程。您将可以自定义CPU、内存、网卡和磁盘。创建之后将需要安装客户机操作系统。
                              </div>
                              <div *ngIf="virtualType == 2">
                                此选项将指导您完成从模板部署虚拟机的过程。模板是最佳配置的虚拟机映像，使您轻松创建可以立即使用的虚拟机。您必须具有一个模板才能继续使用此选项。
                              </div>
                              <div  *ngIf="virtualType == 3">
                                此选项将指导您完成部署现有虚拟机副本的过程。
                              </div>
                              <div  *ngIf="virtualType == 4">
                                此选项将指导您完成从本地或网络上的虚拟机模板文件来创建一台完整的虚拟机。
                              </div>
                              <div  *ngIf="virtualType == 5">
                                此选项将指导您完成将模板转化为一个虚拟机。
                              </div>
                            </div>
                          </div>
                        </div>


                        <div div *ngIf="virtualStep == 2 && virtualType == 1" nz-col nzSpan="18">
                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>名称:</span>
                            </div>
                            <div nz-col nzSpan="16">
                              <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                            </div>
                          </div>
                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>描述:</span>
                            </div>
                            <div nz-col nzSpan="16">
                              <textarea rows="2" placeholder="" class="logininput" [(ngModel)]="vms.description"></textarea>
                            </div>
                          </div>

                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择虚拟机位置:</span>
                            </div>
                            <div nz-col nzSpan="16">
                              <nz-select style="width:200px" [(ngModel)]="vms.parentObjUrn"
                                         (ngModelChange)="log1($event)" [nzOptions]="nzOptionsVmsLocatin" nzAllowClear nzPlaceHolder="">

                              </nz-select>

                            </div>
                          </div>
                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择计算资源:</span>
                            </div>
                            <div nz-col nzSpan="16">

                            <!--  <nz-cascader [nzOptions]="nzOptionsChooseResource" [(ngModel)]="values"
                                           (ngModelChange)="onChanges($event)"></nz-cascader>-->
                              <nz-tree-select
                                style="width: 250px"
                                [nzExpandedKeys]="expandKeys"
                                [nzNodes]="nzOptionsChooseResource"
                                nzShowSearch
                                nzPlaceHolder="选择"
                                [(ngModel)]="chooseResourcValue"
                                (ngModelChange)="onChange($event)"
                              >
                              </nz-tree-select>


                            </div>
                          </div>
                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择操作系统:</span>
                            </div>
                            <div nz-col nzSpan="16">
                              <nz-radio-group [(ngModel)]="vms.osOptions.osType">
                                <label nz-radio (click)="setOs(1)" nzValue="Windows">Windows</label>
                                <label nz-radio (click)="setOs(2)" nzValue="Linux">Linux</label>
                                <label nz-radio (click)="setOs(3)" nzValue="其他">其他</label>
                              </nz-radio-group>
                            </div>
                          </div>
                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择系统版本号:</span>
                            </div>
                            <div nz-col nzSpan="16">

                              <nz-select style="width:300px" [(ngModel)]="vms.osOptions.osVersion"  (ngModelChange)="log1($event)" nzAllowClear nzPlaceHolder="选择系统版本">
                                <nz-option *ngFor="let option of osList" [nzValue]="option.value" [nzLabel]="option.label"></nz-option>
                              </nz-select>
                            </div>
                          </div>

                        </div>



                        <div div *ngIf="virtualStep == 2 && (virtualType == 2||virtualType==3)" nz-col nzSpan="18">
                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>名称:</span>
                            </div>
                            <div nz-col nzSpan="16">
                              <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                            </div>
                          </div>
                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>描述:</span>
                            </div>
                            <div nz-col nzSpan="16">
                              <textarea rows="2" placeholder="" class="logininput" [(ngModel)]="vms.description"></textarea>
                            </div>
                          </div>


                          <div *ngIf="virtualType == 2" nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择模板:</span>
                            </div>
                            <div  nz-col nzSpan="10">
                              <input placeholder="" class="logininput" [(ngModel)]="TemplateInfo.name">
                            </div>
                            <div  nz-col nzSpan="6">
                              <button nz-button  nzType="default"  (click)="showTemplateModal()">选择</button>
                            </div>
                          </div>



                          <div *ngIf="virtualType == 3" nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择虚拟机:</span>
                            </div>
                            <div  nz-col nzSpan="10">
                              <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                            </div>
                            <div  nz-col nzSpan="6">
                              <button nz-button  nzType="default"  (click)="showVmsModal()">选择</button>
                            </div>
                          </div>



                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择虚拟机位置:</span>
                            </div>
                            <div nz-col nzSpan="16">
                              <nz-select style="width:200px" [(ngModel)]="vms.parentObjUrn"  (ngModelChange)="log1($event)" nzAllowClear nzPlaceHolder="">
                                <nz-option *ngFor="let option of nzOptionsVmsLocatin" [nzValue]="option.value" [nzLabel]="option.label"></nz-option>
                              </nz-select>

                            </div>
                          </div>


                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择计算资源:</span>
                            </div>
                            <div nz-col nzSpan="16">

                              <!--  <nz-cascader [nzOptions]="nzOptionsChooseResource" [(ngModel)]="values"
                                             (ngModelChange)="onChanges($event)"></nz-cascader>-->
                              <nz-tree-select
                                style="width: 250px"
                                [nzExpandedKeys]="expandKeys"
                                [nzNodes]="nzOptionsChooseResource"
                                nzShowSearch
                                nzPlaceHolder="选择"
                                [(ngModel)]="chooseResourcValue"
                                (ngModelChange)="onChange($event)"
                              >
                              </nz-tree-select>
                            </div>
                          </div>

                          <div nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="6">
                              <span>虚拟机数量:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <nz-input-number [(ngModel)]="vmSize" [nzMin]="1" [nzMax]="10"
                                               [nzStep]="1"></nz-input-number>
                            </div>
                            <div nz-col nzSpan="6">
                              <span> 名称后缀起始编号:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <nz-input-number [(ngModel)]="namePostfixIndex" [nzMin]="1" [nzMax]="10"
                                               [nzStep]="1"></nz-input-number>
                            </div>
                          </div>

                        </div>


                        <div div *ngIf="virtualStep == 2 && virtualType==5" nz-col nzSpan="18">
                          <div  nz-row style="margin-bottom: 10px">
                            <div nz-col nzSpan="8">
                              <span>选择模板:</span>
                            </div>
                            <div  nz-col nzSpan="10">
                              <input placeholder="" class="logininput" [(ngModel)]="TemplateInfo.name">
                            </div>
                            <div  nz-col nzSpan="6">
                              <button nz-button  nzType="default"  (click)="showTemplateModal()">选择</button>
                            </div>
                          </div>
                        </div>



                        <div div *ngIf="virtualStep == 3 && virtualType==1" nz-col nzSpan="18">
                          <nz-table   #rowSelectionTable
                                      nzShowPagination
                                      nzShowSizeChanger
                                      nzPageSize="5"
                                      [nzData]="listOfData"
                                      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
                          >
                            <thead>
                            <tr>
                              <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th>

                              <th>名称</th>
                              <th>可用容量</th>
                              <th>使用方式</th>
                              <th>类型</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let data of rowSelectionTable.data">
                              <td
                                [nzChecked]="setOfCheckedId.has(data.id)"
                                [nzDisabled]="data.disabled"
                                (nzCheckedChange)="onItemChecked(data.id, $event,setOfCheckedId)"
                              ></td>
                              <td>{{ data.name }}</td>
                              <td>{{ data.freeSizeGB }}</td>
                              <td>{{ data.datastoreUrn }}</td>
                              <td>
                                {{ data.datastoreUrn }}
                              </td>
                            </tr>
                            </tbody>
                          </nz-table>

                        </div>


                        <div div *ngIf="(virtualStep == 4 && virtualType==1 )||(virtualStep == 3 && virtualType==2 )||(virtualStep == 3 && virtualType==3 )" nz-col nzSpan="18">
                          <div nz-row>
                            <nz-tabset style="width:80%">
                              <nz-tab nzTitle="硬件">

                                <div nz-row style="margin-bottom: 10px">
                                  <div nz-col nzSpan="8">
                                    <span>CPU:</span>
                                  </div>
                                  <div nz-col nzSpan="16">
                                    <nz-input-number [(ngModel)]="vms.vmConfig.cpu.quantity" [nzMin]="1" [nzMax]="10"
                                                     [nzStep]="1"></nz-input-number>
                                  </div>
                                </div>

                                <div nz-row style="margin-bottom: 10px">
                                  <div nz-col nzSpan="8">
                                    <span>内存:</span>
                                  </div>
                                  <div nz-col nzSpan="8">
                                    <nz-input-number [(ngModel)]="vms.vmConfig.memory.quantityMB" [nzMin]="1" [nzMax]="40"
                                                     [nzStep]="1"></nz-input-number>
                                  </div>
                                  <div nz-col nzSpan="8">
                                    <nz-radio-group [(ngModel)]="vms.vmConfig.memory.unit" nzButtonStyle="solid">
                                      <label nz-radio-button nzValue="GB">GB</label>
                                      <label nz-radio-button nzValue="MB">MB</label>
                                    </nz-radio-group>
                                  </div>
                                </div>

                                <!--可以添加多个磁盘，网卡-->


                               <div *ngFor="let item of diskList; let i = index">
                                 <div   nz-row style="margin-bottom: 10px">
                                   <div nz-col nzSpan="8">
                                     <span>磁盘{{i}}:</span>
                                   </div>
                                   <div nz-col nzSpan="8">
                                     <nz-input-number [(ngModel)]="item.quantityGB" [nzMin]="1" [nzMax]="1000"
                                                      [nzStep]="10"></nz-input-number>
                                   </div>
                                   <div nz-col nzSpan="4">
                                     <nz-radio-group [(ngModel)]="radioValue" nzButtonStyle="solid">
                                       <label nz-radio-button nzValue="GB">GB</label>
                                     </nz-radio-group>
                                   </div>
                                   <div nz-col nzSpan="2">
                                     <i nz-icon nzType="close" nzTheme="outline" (click)="removeItem(i,diskList)"></i>

                                   </div>
                                 </div>

                               </div>


                                <div *ngFor="let item of nicsList; let i = index">
                                  <div   nz-row style="margin-bottom: 10px">
                                    <div nz-col nzSpan="8">
                                      <span>网卡{{i}}:</span>
                                    </div>
                                    <div  nz-col nzSpan="10">
                                      <input placeholder="" class="logininput" [(ngModel)]="item.portGroupName">
                                    </div>
                                    <div  nz-col nzSpan="4">
                                      <button nz-button  nzType="default"  (click)="showNicsModal(i)">选择</button>
                                    </div>
                                    <div nz-col nzSpan="2">
                                      <i nz-icon nzType="close" nzTheme="outline" (click)="removeItem(i,nicsList)"></i>
                                    </div>
                                  </div>

                                </div>



<!--
                                <div nz-row style="margin-bottom: 10px">
                                  <div nz-col nzSpan="8">
                                    <span>网卡1:</span>
                                  </div>
                                  <div  nz-col nzSpan="10">
                                    <input placeholder="" class="logininput" [(ngModel)]="nicsInfo.name">
                                  </div>
                                  <div  nz-col nzSpan="6">
                                    <button nz-button  nzType="default"  (click)="showNicsModal()">选择</button>
                                  </div>
                                </div>-->



                                <div nz-row style="margin-bottom: 10px">
                                  <div nz-col nzSpan="8">
                                    <span>显卡:</span>
                                  </div>
                                  <div nz-col  nzSpan="8">
                                    <nz-select style="width:80%"  nzAllowClear [(ngModel)]="vms.vmConfig.graphicsCard.type">
                                      <nz-option nzLabel="Cirrus" nzValue="cirrus"></nz-option>
                                      <nz-option nzLabel="VGA" nzValue="VGA"></nz-option>
                                    </nz-select>
                                  </div>
                                  <div nz-col  nzSpan="8">
                                    <nz-select  style="width:80%" nzAllowClear [(ngModel)]="vms.vmConfig.graphicsCard.size">
                                      <nz-option nzLabel="4" nzValue="4"></nz-option>
                                      <nz-option nzLabel="8" nzValue="8"></nz-option>
                                      <nz-option nzLabel="16" nzValue="16"></nz-option>
                                      <nz-option nzLabel="32" nzValue="32"></nz-option>
                                      <nz-option nzLabel="64" nzValue="64"></nz-option>
                                      <nz-option nzLabel="128" nzValue="128"></nz-option>
                                      <nz-option nzLabel="256" nzValue="256"></nz-option>
                                    </nz-select>
                                  </div>
                                </div>
                                <div nz-row style="margin-bottom: 10px">
                                  <div nz-col nzSpan="8">
                                    <span>软驱:</span>
                                  </div>
                                  <div nz-col nzSpan="16">
                                    <nz-select  style="width:80%" nzAllowClear [(ngModel)]="vms.floppyProtocol">
                                      <nz-option nzLabel="自动匹配" nzValue="automatch"></nz-option>
                                      <nz-option nzLabel="不挂载" nzValue="no"></nz-option>
                                    </nz-select>
                                  </div>
                                </div>

                                <div nz-row style="margin-bottom: 10px">
                                  <div nz-col nzSpan="8">
                                    <span>添加新设备:</span>
                                  </div>
                                  <div nz-col nzSpan="16">
                                    <nz-select  style="width:100%" [(ngModel)]="addTypeValue"   (ngModelChange)="addType()"  nzAllowClear >
                                      <nz-option nzLabel="请选择" nzValue="null"></nz-option>
                                      <nz-option nzLabel="磁盘" nzValue="1"></nz-option>
                                      <nz-option nzLabel="网卡" nzValue="2"></nz-option>
                                    </nz-select>
                                  </div>
                                </div>

                              </nz-tab>
                              <nz-tab nzTitle="选项">
                              </nz-tab>

                            </nz-tabset>


                          </div>

                        </div>

                        <div div *ngIf="virtualStep == 4 && virtualType==2" nz-col nzSpan="18">

                          <div nz-row>
                            使用自定义向导或者使用虚拟机属性规格时，请参考对虚拟机或者模板进行配置，否则自定义不生效。
                          </div>

                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>操作系统:</span>
                            </div>
                            <div nz-col nzSpan="18">
                              <span>Windows Server 2012 R2 Standard 64bit
                              </span>
                            </div>

                          </div>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>属性规格:</span>
                            </div>
                            <div nz-col nzSpan="18">
                              <nz-radio-group (ngModelChange)="onChooseChange()" [(ngModel)]="propertyVms" nzName="radiogroup">
                                <label nz-radio nzValue="不使用自定义">不使用自定义</label>
                                <label nz-radio nzValue="自定义向导创建">自定义向导创建</label>
                                <label nz-radio nzValue="使用已有属性">使用已有属性</label>
                              </nz-radio-group>
                            </div>

                          </div>

                          <nz-tabset *ngIf="propertyVms == '自定义向导创建'" >
                            <nz-tab nzTitle="自定义属性">
                              当虚拟机操作系统为Windows，且需加入域时，计算机名称必须唯一，否则此处设置的计算机名称不生效。

                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>计算机名称:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>
                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>管理员密码:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>
                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>确认密码:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>

                              虚拟机将如何参与到网络中？
                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>工作组:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>

                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>windows域服务器:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>

                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>域用户名:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>
                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>域密码:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>
                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>确认密码:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>
                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>确认密码:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>
                              <div nz-row>
                                <div nz-col nzSpan="6">
                                  <span>组织单位:</span>
                                </div>
                                <div nz-col nzSpan="18">
                                  <input placeholder="" class="logininput" [(ngModel)]="vms.name">
                                </div>
                              </div>
                              <label nz-checkbox [(ngModel)]="vms.autoBoot">生成系统初始密码</label>
                            </nz-tab>
                            <nz-tab nzTitle="网卡设置">

                            </nz-tab>
                          </nz-tabset>
                          <div nz-row>
                            <label nz-checkbox [(ngModel)]="vms.autoBoot">保存为计算机属性规格</label>
                          </div>
                        </div>




                        <div div *ngIf="(virtualStep == 5 )|| (virtualStep == 4 && virtualType==3 )" nz-col nzSpan="18">

                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>创建类型:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{createType}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>虚拟机名称:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.name}}</span>
                            </div>
                          </div>

                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>描述:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.description}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>所在位置:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vmsLocationLabel}}</span>
                            </div>
                          </div>

                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>计算资源:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{chooseResourcValueLabel}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>是否与主机绑定:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span></span>
                            </div>
                          </div>

                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>操作系统类型:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.osOptions.osType}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>操作系统版本号:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.osOptions.osVersion}}</span>
                            </div>
                          </div>

                          <h3>虚拟机配置</h3>
                          <nz-divider></nz-divider>
                          <!--CPU-->
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>CPU:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.cpu.quantity}}</span>
                            </div>
                          </div>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>CPU绑定:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.cpu.cpuPolicy}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>CPU线程绑定策略:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.cpu.cpuThreadPolicy}}</span>
                            </div>
                          </div>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>份额:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.cpu.weight}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>预留(MHz):</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.cpu.reservation}}</span>
                            </div>
                          </div>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>限制(MHz):</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.cpu.limit}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>插槽数:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.cpu.slotNum}}</span>
                            </div>
                          </div>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>每个插槽的内核数:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.cpu.coresPerSocket}}</span>
                            </div>
                          </div>
                          <nz-divider nzDashed [nzText]="text">
                            <ng-template ></ng-template>
                          </nz-divider>

                          <!--内存-->
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>内存:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.memory.quantityMB}}</span>
                            </div>
                          </div>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>预留(MB):</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.memory.reservation}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>限制(MB):</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.memory.limit}}</span>
                            </div>
                          </div>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>份额:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.memory.weight}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>大页配置:(MB):</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span></span>
                            </div>
                          </div>


                          <!--磁盘-->
                          <!--网卡-->

                          <nz-divider nzDashed [nzText]="text">
                            <ng-template ></ng-template>
                          </nz-divider>
                          <!--显卡-->
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>显卡:</span>
                            </div>
                            <div nz-col nzSpan="6">

                            </div>
                          </div>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>显存(MB):</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.graphicsCard.size}}</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>设备类型:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.vmConfig.graphicsCard.type}}</span>
                            </div>
                          </div>
                          <nz-divider nzDashed [nzText]="text">
                            <ng-template ></ng-template>
                          </nz-divider>
                          <div nz-row>
                            <div nz-col nzSpan="6">
                              <span>软驱:</span>
                            </div>
                            <div nz-col nzSpan="6">
                              <span>{{vms.floppyProtocol}}</span>
                            </div>
                          </div>
                          <label nz-checkbox [(ngModel)]="vms.autoBoot">创建完成后直接启动虚拟机</label>
                        </div>
                      </div>

                    </ng-container>

                    <div *nzModalFooter>
                      <button nz-button nzType="default" (click)="handleCancel()">取消</button>
                      <button nz-button nzType="default" (click)="lastStep()">上一步</button>
                      <button nz-button nzType="primary" (click)="nextStep()" [nzLoading]="isConfirmLoading">下一步
                      </button>
                      <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">确定</button>
                    </div>
                  </nz-modal>

                  <nz-modal [(nzVisible)]="nicsIsVisible" nzWidth="45%" nzTitle="选择端口组" (nzOnCancel)="handleCancel()" >
                    <ng-container *nzModalContent>
                      <div nz-row style="margin-bottom: 10px">
                        <div nz-col nzSpan="4">
                          <span>分布式交换机:</span>
                        </div>
                        <div nz-col nzSpan="20">
                          <input placeholder="" class="logininput" [(ngModel)]="userName">
                        </div>
                      </div>
                      <div   style="padding-top: 5px;padding-left:5px;border:1px solid rgba(49,26,79,0.41)">
                        <div nz-row style="margin-bottom: 10px">
                          <div nz-col nzSpan="14">
                            <button nz-button nzType="default" (click)="lastStep()">添加端口组</button>

                          </div>
                          <div nz-col nzSpan="5">
                            <input placeholder="" class="logininput" [(ngModel)]="userName">
                          </div>
                          <div nz-col nzSpan="4">
                            <button nz-button nzType="default" (click)="lastStep()">搜索</button>
                          </div>
                        </div>
                        <nz-table   #rowSelectionTable
                                    nzShowPagination
                                    nzShowSizeChanger
                                    nzPageSize="5"
                                    [nzData]="listOfNicsData"
                                    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
                        >
                          <thead>
                          <tr>
                            <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" ></th>

                            <th>端口组名称</th>
                            <th>端口类型</th>
                            <th>连接方式</th>
                            <th>VLAN</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr *ngFor="let data of rowSelectionTable.data">
                            <td
                              [nzChecked]="setOfNicsCheckedId.has(data.id)"
                              [nzDisabled]="data.disabled"
                              (nzCheckedChange)="onItemCheckedNics(data.id, $event,setOfNicsCheckedId)"
                            ></td>
                            <td>{{ data.name }}</td>
                            <td>{{ data.portType }}</td>
                            <td>{{ data.nicsUrn }}</td>
                            <td>
                              {{ data.nicsUrn }}
                            </td>
                          </tr>
                          </tbody>
                        </nz-table>
                      </div>

                    </ng-container>
                    <div *nzModalFooter>
                      <button nz-button nzType="default" (click)="handlNicsCancel()">取消</button>
                      <button nz-button nzType="primary" (click)="handleNicsOk()" [nzLoading]="isConfirmLoading">确定</button>
                    </div>
                  </nz-modal>


                  <nz-modal [(nzVisible)]="templateIsVisible" nzWidth="45%" nzTitle="选择模板" (nzOnCancel)="templateIsVisible=!templateIsVisible" >
                    <ng-container *nzModalContent>

                      <div   style="padding-top: 5px;padding-left:5px;border:1px solid rgba(49,26,79,0.41)">

                        <div nz-row style="margin-bottom: 10px">
                          <div nz-col nzSpan="14">
                          </div>
                          <div nz-col nzSpan="5">
                            <input placeholder="" class="logininput" [(ngModel)]="userName">
                          </div>
                          <div nz-col nzSpan="4">
                            <button nz-button nzType="default" (click)="lastStep()">搜索</button>
                          </div>
                        </div>

                        <nz-table   #rowSelectionTable
                                    nzShowPagination
                                    nzShowSizeChanger
                                    nzPageSize="5"
                                    [nzData]="listOfTemplate"
                                    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
                        >
                          <thead>
                          <tr>
                            <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" ></th>

                            <th>名称</th>
                            <th>ID</th>
                            <th>状态</th>
                            <th>所在集群</th>
                            <th>所在主机</th>
                            <th>与主机绑定</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr *ngFor="let data of rowSelectionTable.data">
                            <td
                              [nzChecked]="setOfTemplateCheckedId.has(data.id)"
                              [nzDisabled]="data.disabled"
                              (nzCheckedChange)="onItemCheckedTemplate(data.id, $event,setOfTemplateCheckedId)"
                            ></td>
                            <td>{{ data.name }}</td>
                            <td>{{ data.urn }}</td>
                            <td>{{ data.status }}</td>
                            <td>{{ data.locationName }}</td>
                            <td>
                              {{ data.hostName }}
                            </td>
                            <td>
                              {{ data.isBindingHost }}
                            </td>
                          </tr>
                          </tbody>
                        </nz-table>
                      </div>

                    </ng-container>
                    <div *nzModalFooter>
                      <button nz-button nzType="default" (click)="templateIsVisible=!templateIsVisible">取消</button>
                      <button nz-button nzType="primary" (click)="handleTemplateOk()" [nzLoading]="isConfirmLoading">确定</button>
                    </div>
                  </nz-modal>


                  <nz-modal [(nzVisible)]="vmsIsVisible" nzWidth="45%" nzTitle="选择虚拟机" (nzOnCancel)="vmsIsVisible=!vmsIsVisible" >
                    <ng-container *nzModalContent>

                      <div   style="padding-top: 5px;padding-left:5px;border:1px solid rgba(49,26,79,0.41)">

                        <div nz-row style="margin-bottom: 10px">
                          <div nz-col nzSpan="14">
                          </div>
                          <div nz-col nzSpan="5">
                            <input placeholder="" class="logininput" [(ngModel)]="userName">
                          </div>
                          <div nz-col nzSpan="4">
                            <button nz-button nzType="default" (click)="lastStep()">搜索</button>
                          </div>
                        </div>

                        <nz-table   #rowSelectionTable
                                    nzShowPagination
                                    nzShowSizeChanger
                                    nzPageSize="5"
                                    [nzData]="virtualList"
                                    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
                        >
                          <thead>
                          <tr>
                            <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" ></th>

                            <th>名称</th>
                            <th>ID</th>
                            <th>状态</th>
                            <th>所在集群</th>
                            <th>所在主机</th>
                            <th>与主机绑定</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr *ngFor="let data of rowSelectionTable.data">
                            <td
                              [nzChecked]="setOfTemplateCheckedId.has(data.id)"
                              [nzDisabled]="data.disabled"
                              (nzCheckedChange)="onVmsChecked(data.id, $event,setOfTemplateCheckedId)"
                            ></td>
                            <td>{{ data.virtualTitle }}</td>
                            <td>{{ data.urn }}</td>
                            <td>{{ data.virtualStaus }}</td>
                            <td>{{ data.clusterName }}</td>
                            <td>
                              {{ data.hostName }}
                            </td>
                            <td>
                              {{ data.isBindingHost }}
                            </td>
                          </tr>
                          </tbody>
                        </nz-table>
                      </div>

                    </ng-container>
                    <div *nzModalFooter>
                      <button nz-button nzType="default" (click)="vmsIsVisible=!vmsIsVisible">取消</button>
                      <button nz-button nzType="primary" (click)="handleVmsOk()" [nzLoading]="isConfirmLoading">确定</button>
                    </div>
                  </nz-modal>



                </div>



            </div>
            <div class="login_btn flex align_center justify_center">
                继续
            </div>
        </div>
        <!-- 连接互联网 -->
        <div *ngIf="step == 3" class="login">
            <div class="login_title">连接互联网</div>
            <div class="login_prompt">连接以激活华为云AI服务</div>
            <div class="ip_form flex flex_column">
                <div class="flex ">
                    <div class="w100 flex align_center">网络协议</div>
                    <div class="flex">
                        <div class="ip_btn flex align_center justify_center ip_active">IPv4</div>
                        <div class="ip_btn flex align_center justify_center">IPv6</div>
                        <div class="ip_btn flex align_center justify_center">IPv4/IPv6</div>
                    </div>
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">IP地址</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">端口</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">默认网关</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">默认网关</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
            </div>
            <div class="login_btn flex align_center justify_center" style="margin-top: 84px;">
                现在连接
            </div>
        </div>
        <!-- 激活license -->
        <div *ngIf="step == 4" class="login">
            <div class="login_title">激活License</div>
            <div class="license_form flex flex_column">
                <div class="flex ">
                    <div class="w100 flex align_center">华为云账号</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">IAM用户名</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">华为云密码</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_start" style="min-width: 100px;">选择激活设备</div>
                    <!-- <div style=" white-space: nowrap;width: 165px;display: inline-flex;">          -->
                    <div style="width: 710px; flex-wrap: wrap;" class="flex">
                        <input type="checkbox" ng-true-value="true" ng-false-value="false"><span style="margin-left:8px;margin-right: 45px;">虚拟机1</span>
                        <input type="checkbox" ng-true-value="true" ng-false-value="false"><span style="margin-left:8px;margin-right: 45px;">虚拟机2</span>
                        <input type="checkbox" ng-true-value="true" ng-false-value="false"><span style="margin-left:8px;margin-right: 45px;">虚拟机3</span>
                        <input type="checkbox" ng-true-value="true" ng-false-value="false"><span style="margin-left:8px;margin-right: 45px;">虚拟机4</span>
                        <input type="checkbox" ng-true-value="true" ng-false-value="false"><span style="margin-left:8px;margin-right: 45px;">虚拟机5</span>
                    </div>
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">云端数据存储地址</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">申请PCA证书</div>
                    <div class="flex " style="width: 165px;height: 28px;">
                        <div class="flex_1 flex align_center">
                            <input style="zoom: 120%; margin: 0px 8px 0px 0px; " class="" type="radio" name="sex" value="male" checked>是
                        </div>
                        <div class="flex_1 flex align_center"><input style="zoom: 120%;margin: 0px 8px 0px 0px;" class="" type="radio" name="sex" value="female">否</div>
                    </div>
                </div>
            </div>
            <div class="login_btn flex align_center justify_center" style="margin-top: 70px;">
                现在激活
            </div>
        </div>

        <!-- 激活成功 -->
        <div *ngIf="step == 5" class="login flex flex_column">
            <div class="login_title">激活成功</div>
            <img style="width: 130px;height: 109px;margin:45px auto 0px;" src="assets/images/license_succ.png">
            <div class="license_succ_msg">
                <div class="flex align_center">
                    <div class="w100">激活账号</div>
                    <div>12345-54321</div>
                </div>
                <div class="flex align_center">
                    <div class="w100">激活日期</div>
                    <div>2021/10/21 18:16:30 </div>
                </div>
                <div class="flex align_center">
                    <div class="w100">到期时间</div>
                    <div>2024/10/21 18:16:30 </div>
                </div>
            </div>
            <div class="license_succ_form">
                <div class="box_header flex align_center">
                    <div style="flex:12">设备名称</div>
                    <div style="flex:11">安装实例数</div>
                </div>
                <div style="height:calc(100% - 28px) ;overflow-y: auto;">
                    <div *ngFor="let item of virtualSuccList" class="box_body flex align_center ">
                        <div style="flex:12">{{item.virtualTitle}}</div>
                        <div style="flex:11">{{item.virtualNum}}</div>
                    </div>
                </div>
            </div>
            <div class="login_btn flex align_center justify_center" style="margin-top: 70px;">
                继续
            </div>
        </div>
        <!-- 安装实例 -->
        <div *ngIf="step == 6" class="login flex flex_column">
            <div class="login_title">安装实例</div>
            <div class="login_prompt">前往HiLens平台对选择激活的设备安装实例</div>
            <div class="activate_succ_form">
                <div class="box_header flex align_center">
                    <div style="flex:12">设备名称</div>
                    <div style="flex:11;padding-right: 10px;" class="flex align_center justify_space">
                        安装实例数
                        <img style="width: 13px;height: 13px;" src="assets/images/icon_refresh.png">
                    </div>
                </div>
                <div style="height:calc(100% - 24px) ;overflow-y: auto;">
                    <div *ngFor="let item of virtualSuccList" class="box_body flex align_center ">
                        <div style="flex:12">{{item.virtualTitle}}</div>
                        <div style="flex:11">{{item.virtualNum}}</div>
                    </div>
                </div>
            </div>
            <div class="flex align_center justify_center" style="margin-top: 158px;">
                <div class="back_btn flex align_center justify_center">
                    上一步
                </div>
                <div class="install_succ_btn flex align_center justify_center mgl10">
                    完成安装
                </div>
            </div>
        </div>
        <!-- 连接至工作网络 -->
        <div *ngIf="step == 7" class="login flex flex_column">
            <div class="login_title">连接至工作网络</div>
            <div class="login_prompt">连接以适应您的实际工作环境</div>
            <div class="ip_form flex flex_column">
                <div class="flex ">
                    <div class="w100 flex align_center">网络协议</div>
                    <div class="flex">
                        <div class="ip_btn flex align_center justify_center ip_active">IPv4</div>
                        <div class="ip_btn flex align_center justify_center">IPv6</div>
                        <div class="ip_btn flex align_center justify_center">IPv4/IPv6</div>
                    </div>
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">IP地址</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">端口</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">默认网关</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
                <div class="flex ">
                    <div class="w100 flex align_center">默认网关</div>
                    <input style="width: 165px;height: 28px;border: 1px solid #ADB0B8;border-radius: 2px;">
                </div>
            </div>
            <div class="flex align_center justify_center" style="margin-top: 43px;">
                <div class="back_btn flex align_center justify_center">
                    暂不设置
                </div>
                <div class="install_succ_btn flex align_center justify_center mgl10">
                    现在连接
                </div>
            </div>
        </div>

        <!-- 连接互联网 -->
        <div *ngIf="step == 8" class="login flex flex_column">
            <div class="login_title">连接互联网</div>
            <img style="width: 391px;height: 300px;margin:74px auto 0px;" src="assets/images/connect_succ.png">
            <div class="connect_msg">连接成功，5s后将自动重启</div>
        </div>

        <!-- 连接互联网 -->
        <div *ngIf="step == 9" class="login flex flex_column">
            <div class="login_title">激活流程已完成，重新启动后生效</div>
            <img style="width: 512px;height: 259px;margin:74px auto 0px;" src="assets/images/restart.png">
            <div class="restart_msg">连接成功，5s后将自动重启</div>
        </div>
    </div>
</div>
